<template>
  <div style="padding-bottom: 60px">
    <van-nav-bar
        title="动态监测"
        fixed
    />
    <van-notice-bar
        color="#1989fa" background="#ecf9ff" left-icon="info-o"
        :scrollable="false"
        text="获取当前实时检测信息"
    />
    <div style="padding-top: 20px">

    </div>

      <div id="main">

      </div>
  </div>
</template>

<script setup>
import {onBeforeUnmount, onMounted,ref} from "vue";
import * as echarts from "echarts";
import dayjs from "dayjs";
import {getModel} from "@/api";
const getData = () => {
    return getModel().then(res=>res.data)
}
const timer = ref()
onMounted(() => {
    getData()


    // 基于准备好的dom，初始化echarts实例
    var chartDom = document.getElementById('main');
// 绘制图表
    var myChart = echarts.init(chartDom);
    var option;

    option = {
        title: {},
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }
        },
        legend: {
            data: ['温度', '湿度','风速','光照']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: []
            }
        ],
        yAxis: [
            {
                type: 'value'
            }
        ],
        series: [
            {
                name: '温度',
                type: 'line',
                stack: 'Total',
                emphasis: {
                },
                data: []
            },
            {
                name: '湿度',
                type: 'line',
                stack: 'Total',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '风速',
                type: 'line',
                stack: 'Total',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
            {
                name: '光照',
                type: 'line',
                stack: 'Total',
                emphasis: {
                    focus: 'series'
                },
                data: []
            },
        ]
    };

    myChart.setOption(option);
    timer.value=setInterval(() => {
        getData().then(res => {
            option.xAxis[0].data.push(dayjs(new Date()).format('HH:mm:ss'))
            option.series[0].data.push(res.temperature)
            option.series[1].data.push(res.minHumidity)
            option.series[2].data.push(res.windSpeed)
            option.series[3].data.push(res.light)
            myChart.setOption(option);
        })
    }, 2000)
})
onBeforeUnmount(()=>{
    clearInterval(timer.value)
})
</script>

<style scoped lang="less">
.footer {
  width: calc(100% - 30px);
  bottom: 100px;
  padding: 0 15px;
}
#main{
  height: 50vh;
  padding-top: 20px;
}
</style>